<!doctype html>
<html lang="zh-cn">
<head>
	<title>简易日历</title>
	<meta charset="utf-8">
	<style>
		body{
			text-align: center;
			margin:0;
		}
		#count{
			width:29%;
			height:600px;
			margin:0 auto;
			background-color:#777;
		}
		#top{
			width:100%;
			height:420px;
			background-color:blue;
		}
		.months{
			width:28%;
			height:85px;
			background-color:pink;
			margin:10px;
			float:left;
		}
		.months p{
			font-size:30px;
			margin-top:-15px;
		}

	</style>
	<script>
		window.onload=function(){
			var arr=[
			'大家都每天开开心心的',
			'自己好好加油学习',
			'哈哈。。。。。',
			'嘿嘿##########3',
			'哟呵%%%%%%%%%%%%%%%%',
			'哟西&&&&&&&&&&&&&&&',
			'努力挣钱',
			'我想做的事情一定要做好',
			'人生没什么是努力完不成的',
			'我的家人都健健康康',
			'我的朋友都快乐永远',
			'抓住青春的尾巴'
			];
			var otop=document.getElementById('top');
			var obtm=document.getElementById('bottom');
			var amot=otop.getElementsByTagName('div');
			for(var i=0;i<amot.length;i++)
			{
				amot[i].index=i;
				amot[i].onmouseover=function()
				{
					for(var j=0;j<amot.length;j++)
					{
						amot[j].style.background="pink";
					}
					this.style.background="#777";
					amot[this.index].style.color="#fff";
					obtm.innerHTML='<h2>'+(this.index+1)+'月事件</h2><p>'+arr[this.index]+'</p>';
				}
				

			}
		}
	</script>
</head>
<body>
	<div id="count">
		<div id="top">
			<div class="months">
				<h2>1月</h2>
				<p>JAN</p>
			</div>
			<div class="months">
				<h2>2月</h2>
				<p>FER</p>
			</div>
			<div class="months">
				<h2>3月</h2>
				<p>MAR</p>
			</div>
			<div class="months">
				<h2>4月</h2>
				<p>APR</p>
			</div>
			<div class="months">
				<h2>5月</h2>
				<p>MAY</p>
			</div>
			<div class="months">
				<h2>6月</h2>
				<p>JUN</p>
			</div>
			<div class="months">
				<h2>7月</h2>
				<p>JUL</p>
			</div>
			<div class="months">
				<h2>8月</h2>
				<p>AUG</p>
			</div>
			<div class="months">
				<h2>9月</h2>
				<p>SEP</p>
			</div>
			<div class="months">
				<h2>10月</h2>
				<p>OCT</p>
			</div>
			<div class="months">
				<h2>11月</h2>
				<p>NOV</p>
			</div>
			<div class="months">
				<h2>12月</h2>
				<p>DEC</p>
			</div>


		</div>
		<div id="bottom">
		</div>
	</div>
</body>
	
</html>